<template>
	<div style="background: #fff;min-height: 100vh;">
		<productConSwiper class="skeleton-rect" :imgUrls="sliderImage"></productConSwiper>
		<view class="iconfont icon-xiangzuo h5_back" @tap="returns"></view>
		<view class="info" v-if="info">
			<view class="info-main">{{info.name}}</view>
			<view class="info-secondary">
				<p>{{timeStatus(info.dayTime).time}}</p>
				<span class='store-status' v-if="timeStatus(info.dayTime).status">营业中</span>
				<span class='store-status2' v-else>休息中</span>
			</view>
			<view class="info-message"><span style="white-space: nowrap;">站点电话：</span>{{info.phone | phoneStr}}</view>
			<view class="info-message"><span style="white-space: nowrap;">站点地址：</span><view class="info-message">{{info.address | addressStr}}{{info.detailedAddress}}<p v-if="info.distance" class="distance"><span class="iconfont2 icon2-dingwei"></span>{{ info.distance/1000 }}km</p></view></view>
			
			<view class="info-btn">
				
				<!-- #ifdef H5 -->
				<!-- <a :href="'tel:' + info.phone" style='text-decoration: none;'>
				<view class="info-btn-item">
					<view>
						<span class="iconfont2 icon2-dianhua" style="color: #FFA551;"></span>
					</view>
					<view class="info-btn-item-text">电话</view>
				</view>
				</a> -->
				<!-- #endif -->
				<!-- #ifdef MP || APP-PLUS -->
				<!-- <view class="info-btn-item" @click="call(info.phone)">
					<view>
						<span class="iconfont2 icon2-dianhua" style="color: #FFA551;"></span>
					</view>
					<view class="info-btn-item-text">电话</view>
				</view> -->
				<!-- #endif -->
				<!-- <view class="info-btn-border"></view> -->
				<view class="info-btn-item" @click.stop="showMaoLocation(info)">
					<view>
						<span class="iconfont2 icon2-daohang" style="color: #5b83e6;"></span>
					</view>
					<view class="info-btn-item-text">导航</view>
				</view>
			</view>
			<view class="btn" @click.stop="goBuy" v-if="info.storeType==0">在线买单</view>
			<view v-if="info.storeType==1" class="btn-body">
				<view class="btn" @click.stop="goSave">传递爱心</view>
				<image src="./bang.png" class="btn-img" @click.stop="goRanking"></image>
			</view>
		</view>
		<image mode="widthFix" v-for="(item,index) in imgs" :key="index" :src='item' class="detailimg"></image>
	</div>
</template>

<script>
	import productConSwiper from '@/components/productConSwiper';
	
	import {
		storeDetail
	} from "@/api/store";
	import {
		mapGetters
	} from "vuex";
	const LONGITUDE = "user_longitude";
	const LATITUDE = "user_latitude";
	const MAPKEY = "mapKey";
	export default {
		name: "storeDetail",
		components: {
			productConSwiper,
		},
		filters: {
			addressStr(address) {
				return address.replace(new RegExp(',', 'g'),'')
			},
			phoneStr(tel) {
				return tel.substr(0, 3) + "****" + tel.substr(7);
			}
		},
		data() {
			return {
				info: null,
				sliderImage: [],
				imgs: [],
				
			};
		},
		onLoad(options) {
			try {
				this.user_latitude = uni.getStorageSync('user_latitude');
				this.user_longitude = uni.getStorageSync('user_longitude');
			} catch (e) {
				// error
			}
			if (this.user_latitude && this.user_longitude) {
				this.getDetail(options)
			} else {
				this.selfLocation(options);
			}
			
		},
		mounted() {
			
		},
		methods: {
			selfLocation(options) {
				let self = this
				// #ifdef H5
				if (self.$wechat.isWeixin()) {
					self.$wechat.location().then(res => {
						this.user_latitude = res.latitude;
						this.user_longitude = res.longitude;
						uni.setStorageSync('user_latitude', res.latitude);
						uni.setStorageSync('user_longitude', res.longitude);
						self.getDetail(options);
					})
				} else {
				// #endif	
					uni.getLocation({
						type: 'wgs84',
						success: (res) => {
							console.log(res)
							try {
								this.user_latitude = res.latitude;
								this.user_longitude = res.longitude;
								uni.setStorageSync('user_latitude', res.latitude);
								uni.setStorageSync('user_longitude', res.longitude);
							} catch {}
							self.getDetail(options);
						},
						complete: function() {
							self.getDetail(options);
						}
					});
					// #ifdef H5	
				}
				// #endif
			},
			showMaoLocation(e) {
				let self = this;
				// #ifdef H5
				if (self.$wechat.isWeixin()) {
					self.$wechat.seeLocation({
						latitude: Number(e.latitude),
						longitude: Number(e.longitude)
					}).then(res => {
						console.log('success');
					})
				} else {
					// #endif	
					location.href = `https://mapapi.qq.com/web/mapComponents/locationMarker/v/index.html?type=0&marker=coord:${Number(e.latitude)},${Number(e.longitude)};title:${e.name};addr:${e.address}-${e.detailedAddress}&key=ZEHBZ-B3BHI-OIWGP-U4RDV-DO425-VCBIO&referer=shared_store`;
					// uni.openLocation({
					// 	latitude: Number(e.latitude),
					// 	longitude: Number(e.longitude),
					// 	name: e.name,
					// 	address: `${e.address}-${e.detailedAddress}`,
					// 	success: function() {
					// 		console.log('success');
					// 	}
					// });
					// #ifdef H5	
				}
				// #endif
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				});
			},
			getDetail(options) {
				storeDetail({
					id: options.id,
					latitude: this.user_latitude || "", //纬度
					longitude: this.user_longitude || "", //经度
				}).then(res => {
					this.sliderImage = [res.data.image]
					this.info = res.data || null
					if (this.info && this.info.imgs && this.info.imgs.length > 1) {
						this.imgs = this.info.imgs.split(',')
						console.log(this.imgs)
					}
				})
			},
			goRanking() {
				uni.navigateTo({
					url: `/pages/goods/goods_details_store/ranking?id=${this.info.id}`
				})
			},
			goSave() {
				uni.navigateTo({
					url: `/pages/users/user_ticket/save?id=${this.info.id}&card=${this.info.cardNo}`
				})
			},
			goBuy() {
				uni.navigateTo({
					url: `/pages/activity/small_page/index?id=275`
				})
			},
			// 后退
			returns: function() {
				uni.navigateBack()
			},
			timeStatus(timeList) {
				let status = '',time=''
				let list = timeList.split(',')
				// 方法
				function checkAuditTime(startTime, endTime){
				    // 获取当前时间
				    const date  = new Date()
				    // 获取当前时间的年月日
				    const dataStr = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} `
				 
				    // 获取开始时间、结束时间、现在时间的时间戳
				    let startDate = new Date((dataStr + startTime).replace(/-/g,'/')).getTime()
				    let endDate = new Date((dataStr + endTime).replace(/-/g,'/')).getTime()
				    let nowDate = date.getTime()
				 
				    const s = startDate > endDate // 判断开始时间否大于结束时间
				    if(s) [startDate, endDate] = [endDate, startDate] // 若开始时间否大于结束时间则交换值
				 
				    // 判断现在的时间是否在开始时间和结束时间之间，若s为true则结果取反
				    if(nowDate > startDate && nowDate < endDate){
				        return s ? false : true
				    }else{
				        return s ? true : false
				    }
				}
				// 使用
				if (list.length) {
					time = `营业时间：${(list[0] || '').substring(0,5)}-${(list[1] || '').substring(0,5)}`
					status = checkAuditTime(list[0],list[1])
				}
				return {
					status: status || 0,
					time: time || '无'
				}
			}
		},
		onReachBottom() {
		}
	};
</script>

<style scoped lang="scss">
	.btn-body{
		display: flex;
		align-items: center;
	}
	.btn-img{
		width: 100rpx;
		margin-left: 20rpx;
		height: 100rpx;
		flex-shrink: 0;
	}
	.detailimg{
		display: flex;
		width: 100%;
		margin: 0 !important;
	}
	.btn{
		width: 694rpx;
		height: 88rpx;
		@include main_bg_color(theme);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		border-radius: 44px;
	}
	.distance{
		margin-left: 20rpx;
		color: #FFA551;
	}
	.info-btn-border{
		width: 1rpx;
		height: 36rpx;
		background: #D8D8D8;
	}
	.info-btn{
		display: flex;
		justify-content: space-between;
		width: 250rpx;
		margin: 63rpx auto 100rpx auto;
	}
	.info-btn-item-text{
		font-size: 24rpx;
		color: #666666;
		margin-top: 9rpx;
	}
	.info-btn-item{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		
	}
	.info{
		padding: 50rpx 30rpx;
		&-main{
			font-size: 36rpx;
			color: #333333;
			margin-bottom: 16rpx;
		}
		&-secondary {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			p{
				font-size: 24rpx;
				color: #666666;
				margin-right: 20rpx;
			}
		}
		&-message{
			display: flex;
			margin-bottom: 20rpx;
		}
	}
	.h5_back{
		color: #000;
		position: fixed;
		left: 20rpx;
		top: 20rpx;
		font-size: 32rpx;
		text-align: center;
		width: 58rpx;
		height: 58rpx;
		background: rgba(255, 255, 255, 0.3);
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.store-status2{
		background-color: #F5F5F5;
		color: #999999;
		height: 30rpx;
		font-size: 22rpx;
		line-height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 5rpx;
	}
	.store-status{
		@include coupons_light_color(theme);
		@include main_color(theme);
		height: 30rpx;
		font-size: 22rpx;
		line-height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 5rpx;
	}
	
</style>
